
<!-- 是templete 不是  templete -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- :to="{ path: '/homePage' }" -->
      <el-breadcrumb-item :to="{ path: '/homePage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限树形结构数据</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div>
        <zk-table
          :data="rightList"
          :columns="columns"
          :selection-type="false"
          :expand-type="false"
          show-index
          index-text="#"
          :border="true"
          :show-row-hover="false"
        >
          <!-- 自定义插槽 -->
          <!-- <template slot="isok" slot-scope="scope">
            <i
              class="el-icon-success"
              aria-setsize="100"
              v-if="scope.row.cat_deleted === false"
              style="font-size: 15px; color: green"
            ></i>
            <i
              class="el-icon-error"
              v-else
              style="font-size: 15px; color: red"
            ></i>
          </template>

          <template slot="order" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag
              size="mini"
              type="success"
              v-else-if="scope.row.cat_level === 1"
              >二级</el-tag
            >
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
          </template> -->

          <template slot="opt">
            <el-button type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete">删除</el-button>
          </template>
        </zk-table>
      </div>
    </el-card>
  </div>
</template>
    
    <script>
export default {
  data() {
    //数据区
    return {
        rightList: [],
        columns: [
        {
          label: "商品管理",
          prop: "authName",
        },
        // {
        //   // 自定义插槽
        //   label: "是否有效",
        //   // prop: 'likes',
        //   // minWidth: '200px',
        //   type: "template",
        //   template: "isok",
        // },

        // {
        //   // 自定义插槽
        //   label: "排序",
        //   // prop: 'likes',
        //   // minWidth: '200px',
        //   type: "template",
        //   template: "order",
        // },

        {
          // 自定义插槽
          label: "操作",
          // prop: 'likes',
          // minWidth: '200px',
          type: "template",
          template: "opt",
        },
      ],
    };
  },

  //方法区
  methods: {

    async getTreeRightList(){
        // 1.得到权限树形结构数据
      const { data: resData } = await this.$http.get("rights/tree");
      if (resData.meta.status !== 200) {
        return this.$message.error(resData.meta.msg);
      }
      this.rightList = resData.data;
    }

  },

  //钩子函数
  created() {
    this.getTreeRightList()
  },
};
</script>
    
  <style lang="less" scoped>
</style>